<template>
	<view class="content">
		<view class="item" v-if="type==1">
			<view class="imgbox">
				<view class="title">
					<text>请选择装货单附件</text>
					<view class="icon iconfont icon-guanyu"></view>
				</view>
				<view class="file" v-for="(item,index) in imgurl" :key='index'>
					<view class="url">{{item}}</view>
					<button class="btn" @tap="openurl(item)">查看</button>
					<button class="btn" @tap="del(index,1)">删除</button>
				</view>
				<view class="upload">
					<view class="img">
						<uni-icons type="plusempty" size="60" color="#f7f7f7" @tap="choosefile(1)"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="item" v-if="type==2">
			<!-- <view class="list">
				<text>实际运输数量：</text>
				<textarea placeholder="请输入" placeholder-class="input-style" class="ipt" auto-height="true"
					v-model="realNum" />
			</view> -->
			<view class="imgbox">
				<view class="title">
					<text>请选择卸货单附件</text>
					<view class="icon iconfont icon-guanyu"></view>
				</view>
				<view class="file" v-for="(item,index) in imgurl" :key='index'>
					<view class="url">{{item}}</view>
					<button class="btn" @tap="openurl(item)">查看</button>
					<button class="btn" @tap="del(index,1)">删除</button>
				</view>
				<view class="upload">
					<view class="img">
						<uni-icons type="plusempty" size="60" color="#f7f7f7" @tap="choosefile(1)"></uni-icons>
					</view>
				</view>
			</view>
			<!-- <view class="imgbox">
				<view class="title">
					<text>请选择货权转移单附件</text>
					<view class="icon iconfont icon-guanyu"></view>
				</view>
				<view class="file" v-for="(item,index) in transfer" :key='index'>
					<view class="url">{{item}}</view>
					<button class="btn" @tap="openurl(item)">查看</button>
					<button class="btn" @tap="del(index,2)">删除</button>
				</view>
				<view class="upload">
					<view class="img">
						<uni-icons type="plusempty" size="60" color="#f7f7f7" @tap="choosefile(2)"></uni-icons>
					</view>
				</view>
			</view> -->
		</view>
		<view class="btnbox">
			<view class="btn search" @tap="submit">提交</view>
			<navigator class="btn" open-type="navigateBack">取消</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		uploadReal,
		uploadUnloadFile
	} from '../../../network/main.js';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import uploadUrl from '../../../network/utils.js';
	onLoad((res) => {
		id.value = res.id
		type.value = res.type
		if (res.type == 2) {
			uni.setNavigationBarTitle({
				title: '上传卸货单'
			})
		}
	})
	const type = ref('')
	const id = ref('')
	const imgurl = reactive([])
	const realNum = ref('')
	const transfer = reactive([])
	const choosefile = (flag) => {
		// #ifdef  APP-PLUS
		let fileTypes = ["doc", "docx", "xls", "xlsx", "pdf", "txt", "pptx"]
		let chooseFile = plus.io.chooseFile({
			title: '选择文件',
			filetypes: fileTypes,
			multiple: false
		}, (e) => {
			uni.uploadFile({
				url: uploadUrl.uploadUrl,
				filePath: e.files[0],
				name: 'file',
				header: {
					'token': uni.getStorageSync('token')
				},
				formData: {
					file: e.files[0]
				},
				success(response) {
					let data = JSON.parse(response.data)
					if (flag == 1) {
						imgurl.push(data.data.fullurl)
					} else {
						transfer.push(data.data.fullurl)
					}
				}
			})
		})
		// #endif

		// #ifndef  APP-PLUS	
		H5upload(flag)
		//#endif
	}
	const H5upload = (flag) => {
		uni.chooseFile({
			count: 1,
			complete(res) {
				uni.uploadFile({
					url: uploadUrl.uploadUrl,
					filePath: res.tempFilePaths[0],
					name: 'file',
					header: {
						'token': uni.getStorageSync('token')
					},
					formData: {
						file: res.tempFilePaths[0]
					},
					success(response) {
						let data = JSON.parse(response.data)
						if (flag == 1) {
							imgurl.push(data.data.fullurl)
						} else {
							transfer.push(data.data.fullurl)
						}
					}
				})
			}
		})
	}
	const openurl = (url) => {
		// #ifdef  APP-PLUS
		plus.runtime.openURL(url, function(res) {});
		// #endif

		//#ifndef  APP-PLUS		
		window.open(url)
		//#endif
	}
	const del = (index,flag) => {
		if(flag==1){
			imgurl.splice(index, 1)
		}else{
			transfer.splice(index, 1)
		}
	}
	const submit = () => {
		if (type.value == 1) {
			let data = {
				id: id.value,
				real_url: imgurl
			}
			uploadReal(data).then(res => {
				uni.showToast({
					title: '提交成功'
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 300)
			})
		} else {
			let data = {
				purchase_inbound_order_id: id.value,
				goods_real_num: realNum.value,
				file_url: imgurl,
				hqry_url: transfer
			}
			uploadUnloadFile(data).then(res => {
				uni.showToast({
					title: '提交成功'
				})
				// sendFlag()
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 300)
			})
		}
	}

	const sendFlag = () => {
		uni.request({
			url: uploadUrl.orderUrl + '/system/sendShipments',
			method: 'post',
			header: {

			},
			data: {
				id: id.value
			},
			success(res) {

			}
		})
	}
</script>

<style lang="scss">
	.item {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		background-color: #fff;

		.imgbox {
			background-color: #fff;

			.upload {
				display: flex;
				justify-content: flex-start;

				.img {
					width: 30%;
					height: 220rpx;
					display: inline-block;
					border: 2rpx solid #f7f7f7;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
				}
			}

			.file {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10rpx 0;

				.url {
					width: 400rpx;
					font-size: 24rpx;
					color: #f6bf00;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.btn {
					width: 120rpx;
					height: 60rpx;
					font-size: 24rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #f6bf00;
				}
			}

			.title {
				margin-bottom: 30rpx;
				font-size: 32rpx;
				display: flex;
				justify-content: flex-start;
				gap: 10rpx;
				// font-weight: bold;

				.icon {
					font-size: 36rpx;
					color: #ff6700;
					font-weight: normal;
				}
			}
		}


		.list {
			margin: 20rpx 0;
			width: 100%;
			display: flex;
			align-items: center;

			.ipt {
				width: 400rpx;
				line-height: 42rpx;
			}
		}
	}

	.btnbox {
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding: 60rpx 0;

		.btn {
			width: 200rpx;
			height: 60rpx;
			background-color: #fff;
			line-height: 60rpx;
			text-align: center;
			border-radius: 12rpx;
			font-size: 28rpx;
		}

		.search {
			background-color: #ffc400;
		}
	}
</style>